<!doctype html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Pngquantjs- Compress pngs right inside your browser</title>
    <meta name="description" content="Pngquantjs- Compress pngs right inside your browser">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">

    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/main.min.css">
</head>

<body>
    <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="container">

        <div id="main" class="main wrapper clearfix">
            <h3>PNG图片压缩</h3>
            <div class="status-bar">
                <div class="loading">
                    <div class="indicator yellow"></div>Worker loading...</div>
                <div class="loaded" style="display:none">
                    <div class="indicator green"></div>Worker loaded</div>
            </div>

            <div id="file-dropper">
                <div class="description">
                    <div class="upload-text">把PNG图片拖入此处 </div>
                    <div class="or-text"> Or </div>
                    <div class="button-container">
                        <input type="file" id="filePicker" accept="image/x-png" style="display:none" />
                        <button id="upload-button" class="button" onclick="document.getElementById('filePicker').click()">从本地导入图片</button>
                    </div>
                </div>
            </div>
            <div id="terminal" style="display:none">
                <div class="input-preview">
                    <div id="input-file-stats" class="file-stats"></div>
                    <img id="input-img" src="">
                </div>
                <div class="output-preview" style="margin-top:10px; display:none">
                    <div id="output-file-stats" class="file-stats"></div>
                    <img id="output-img" src="">
                </div>
                <div id="control-panel" class="clearfix">
                    <div class="control">
                        <label for="quality">Quality</label>
                        <section class="range-slider" id="quality">
                            <span class="range-values"></span>
                            <input value="30" min="0" max="100" step="1" type="range">
                            <input value="35" min="0" max="100" step="1" type="range">
                        </section>
                    </div>
                    <div class="control clearfix">
                        <label for="speed">Speed</label>
                        <span class="subtext" style="font-size:10px;color:#cc2c38">* Better the speed less the compression</span>
                        <div class="single-slider">
                            <span class="speed-value"></span>
                            <input value="2" min="0" max="10" step="1" type="range" id="speed-control">
                        </div>
                    </div>
                    <div class="control" style="margin-top:25px; width: 200px;">
                        <button class="button" id="compress" style="float:left" disabled="disabled">Compress</button>
                        <button class="button" id="reset" style="float: right" disabled="disabled">Reset</button>
                    </div>
                </div>
                <div class="compress-text" style="display:none">
                    Compressing
                </div>
                <div class="refresh-container" style="display:none">
                    <button class="button" id="refresh">Reset</button>
                </div>
                <div id="console" style="display:none">
                    <div class="section-title">Console</div>
                    <pre id="output"></pre>
                </div>
            </div>


        </div>
        <!-- #main -->
    </div>
    <div class="footer-container" id="footer">
        <footer class="wrapper">
            <h6 id="footer-content">Created with <3 by <a href="https://github.com/psych0der">psych0der</a></h6>
        </footer>
    </div>


    <script src="js/index.js"></script>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
        (function(i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function() {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-93838702-1', 'auto');
        ga('send', 'pageview');
    </script>
</body>

</html>
